import { Button, Form, Input } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { NavLink } from 'react-router-dom'
import '../../css/Register.css'
import { useState } from 'react'

function Register() {
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [form] = Form.useForm()

  return (
    <div id='register'>
      <h1 className='logo'>
        <img src="/src/assets/jiajule.png" alt="" />
      </h1>
      <h2>创建新账户</h2>
      <p className='p1'>设置您的用户名和密码。</p>
      <p className='p1'>你以后可以随时更改它。</p>

      <Form layout='horizontal' style={{ textAlign: "left" }} form={form}
        onFinish={(values) => {
          console.log(values);
        }}
        footer={
          <Button block type='submit' color='primary' size='large'>
            注册
          </Button>
        }
        >
        <Form.Item label='昵称' name='uname' rules={[{ required: true }]}>
          <Input placeholder='请输入' />
        </Form.Item>
        <Form.Item label='邮箱' name='uemail' rules={[{ required: true }, { type: 'email', message: '请输入正确的邮箱' }]}>
          <Input placeholder='请输入' />
        </Form.Item>
        <Form.Item
          label='密码'
          name='pwd'
          extra={
            <div className='eye'>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
          rules={[{ required: true }]}>
          <Input
            placeholder='请输入密码'
            clearable
            type={visible ? 'text' : 'password'}
          />
        </Form.Item>
        <Form.Item
          label='确认密码'
          name='confirmPwd'
          extra={
            <div className='eye'>
              {!visible2 ? (
                <EyeInvisibleOutline onClick={() => setVisible2(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible2(false)} />
              )}
            </div>
          }
          rules={[{ required: true }, {
            validator: (_rule, value) => {
              if (value !== form.getFieldValue('pwd')) {
                return Promise.reject('两次密码不一致');
              }
              return Promise.resolve();
            }
          }]}>
          <Input
            placeholder='请输入密码'
            clearable
            type={visible2 ? 'text' : 'password'}
          />
        </Form.Item>
      </Form>
      <p className='p2'>已有账户了? <NavLink to={'/Login'}>登录</NavLink></p>
    </div>
  )
}

export default Register
